<template>
  <div>
    <!-- 顶部区域 -->
    <div class="header">
      <img src="@/assets/images/logo.jpg" alt="" />
    </div>
    <!-- 导航栏 -->
    <van-tabs v-model="active">
      <van-tab title="推荐音乐" name="1"><Music /></van-tab>
      <van-tab title="热歌榜" name="2"><HotMusic /></van-tab>
      <van-tab title="搜索" name="3"><Search /></van-tab>
    </van-tabs>
  </div>
</template>
  
<script>
import Music from "./Music.vue";
import HotMusic from "./HotMusic.vue";
import Search from "./Search.vue";

export default {
  data() {
    return {
      active: 2,
    };
  },
  //   注册组件
  components: {
    Music,
    HotMusic,
    Search,
  },
};
</script>

<style lang="less" scoped>
.header {
  background-color: #d43c33;
  height: 1.68rem;
}
// 修改第三方库的样式，需要/deep/深层渗透
/deep/.van-tabs--line .van-tabs__wrap {
  border-bottom: 1px solid #eee;
  .van-tab {
    font-size: 16px;
  }
}
</style>